<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<style>
#menu{width:100%;height:1000px;}
table{ border:1px solid black;margin:0px auto; background:url(images/one.jpg);}
table td{height:38px;}
.left{ text-align:right;}
.shuru{ text-align:left;}
.tishi1{ border:1px solid #FF0;font-size:12px; padding-left:0px;}
.tishi2{ border:1px solid #F00;background:#F90;font-size:12px;}
.tishi3{ border:1px solid #090;font-size:12px;}
</style>
</head>
<script src="jquery-1.8.3.js"></script>
<script>
  $(function(){
	  //用户名验证
	  $("#s1").focus(function(){
		  $("#t1").removeClass().addClass("tishi1").html("请输入用户名");
		  })
	  $("#s1").blur(function(){
		  var p=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{4,18}[0-9a-zA-Z]$/;
		  if($("#s1").val()==""){
			  $("#t1").removeClass().addClass("tishi2").html("<img src='images/li_err.gif'/>用户名不能为空，请输入用户名");
			  ff=false;
			  }else if(p.test($("#s1").val())==false){
			  $("#t1").removeClass().addClass("tishi2").html("<img src='images/li_err.gif'/>1、由字母、数字、下划线、点、减号组成<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、只能以数字、字母开头或结尾，且长度为4-18");
			  ff=false;
			}else{
			  $("#t1").removeClass().addClass("tishi3").html("<img src='images/li_ok.gif'/>用户名输入正确"); 
					  }
		  })
		  //密码验证
	  $("#s2").focus(function(){
		  $("#t2").removeClass().addClass("tishi1").html("请设置密码");
		  })
	  $("#s2").blur(function(){
		  if($("#s2").val()==""){
			  $("#t2").removeClass().addClass("tishi2").html("<img src='images/li_err.gif'/>密码不能为空，请设置密码");
			  ff=false;
			  }else if($("#s2").val().length<4||$("#s2").val().length>18){
			  $("#t2").removeClass().addClass("tishi2").html("<img src='images/li_err.gif'/>密码长度为4-18位");
			  ff=false;
			}else{
			  $("#t2").removeClass().addClass("tishi3").html("<img src='images/li_ok.gif'/>密码输入正确"); 
					  }
		  })
		  //确认密码
		  $("#s3").focus(function(){
		  $("#t3").removeClass().addClass("tishi1").html("请再次输入密码");
		  })
	  $("#s3").blur(function(){
		  if($("#s3").val()==""){
			  $("#t3").removeClass().addClass("tishi2").html("<img src='images/li_err.gif'/>密码不能为空");
			  ff=false;
			  }else if($("#s3").val()!=$("#s2").val()){
			  $("#t3").removeClass().addClass("tishi2").html("<img src='images/li_err.gif'/>密码不一致，请重新输入");
			  ff=false;
			}else{
			  $("#t3").removeClass().addClass("tishi3").html("<img src='images/li_ok.gif'/>密码输入正确"); 
					  }
		  })
		  
		  //昵称验证
		  $("#s5").focus(function(){
		  $("#t5").removeClass().addClass("tishi1").html("请填写您的昵称");
		  })
	  $("#s5").blur(function(){
		  var p=/^[\u4e00-\u9fa5]{2,6}$/;
		  var p2=/[\u4e00-\u9fa5]/g;
		  var len=$("#s5").val().replace(p2,"ab").length;
		  if($("#s5").val()==""){
			  $("#t5").removeClass().addClass("tishi2").html("<img src='images/li_err.gif'/>昵称不能为空");
			  ff=false;
			  }else if(len<2||len>6){
			  $("#t5").removeClass().addClass("tishi2").html("<img src='images/li_err.gif'/>昵称长度为2-6");
			  ff=false;
			}else{
			  $("#t5").removeClass().addClass("tishi3").html("<img src='images/li_ok.gif'/>昵称输入正确"); 
					  }
		  })
		  //关联手机号
		  $("#s6").focus(function(){
		  $("#t6").removeClass().addClass("tishi1").html("请填写您要关联的手机号");
		  })
	  $("#s6").blur(function(){
		  var p=/^(13|15|18)\d{9}$/;
		  if($("#s6").val()==""){
			  $("#t6").removeClass().addClass("tishi2").html("<img src='images/li_err.gif'/>关联手机号不能为空，请输入关联手机号");
			  ff=false;
			  }else if(p.test($("#s6").val())==false){
			  $("#t6").removeClass().addClass("tishi2").html("<img src='images/li_err.gif'/>手机号只能以13、15、18开头，长度为11");
			  ff=false;
			}else{
			  $("#t6").removeClass().addClass("tishi3").html("<img src='images/li_ok.gif'/>手机号输入正确"); 
					  }
		  })
	
	  $("#tijiao").click(function(){
		  $("input").each(function(){
			  if($(this).val()!=""){
				  if(confirm("确认提交?")){
					  alert("确认！");
					  return true;
					  }else{
						  alert("确认取消？");
						  return false;
						  }
				  }else{
					   alert("注册信息有误，请重新输入后再提交");
					   return false;
					  }
			 
			  })
		  })
	  })
</script>
<body>
<div id="menu">
  <img src="images/name.vvd.png" style="width:150px; height:150px;margin-left:800px;"/>
  <img src="images/vvd.bmp" />
  <form action="login.html" method="post">
    <table>
      <tr>
        <td class="left">通行证用户名：</td>
        <td class="shuru"><input type="text" size="10" id="s1"/></td>
        <td width="300px"><div class="tishi" id="t1"></div></td>
      </tr>
      <tr>
        <td class="left">登录密码：</td>
        <td class="shuru"><input type="password" id="s2"/></td>
        <td width="300px"><div class="tishi" id="t2"></div></td>
      </tr>
      <tr>
        <td class="left">确认登录密码：</td>
        <td class="shuru"><input type="password" id="s3"/></td>
        <td width="300px"><div class="tishi" id="t3"></div></td>
      </tr>
      <tr>
        <td class="left">性别：</td>
        <td colspan="2"><input type="radio" name="xingbie" checked="checked"/>男<input type="radio" name="xingbie"/>女</td>
      </tr>
      
      <tr>
        <td class="left">昵称：</td>
        <td class="shuru"><input type="text" id="s5"/></td>
        <td width="300px"><div class="tishi" id="t5"></div></td>
      </tr>
      <tr>
        <td class="left">关联手机号：</td>
        <td class="shuru"><input type="text" id="s6"/></td>
        <td width="300px"><div class="tishi" id="t6"></div></td>
      </tr>
      
      <tr>
        <td colspan="2" style="text-align:center"><input type="submit" src="images/button.gif" id="tijiao" /></td>
        <td></td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>
